<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<style>
		pre
		{
			border: medium double #000000;
		}
	</style>
	<title>Example of DOM</title>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<pre id="results"></pre>
<p id="tblock">
	There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone. By the time we add the countless types of <span id="apple">apples</span>, <span id="orange">oranges</span>, and other well-known fruit, wer faced with thousands of choices.
</p>
<img id="apples" class="fruits images" name="apple" src="images/banana-small.png" alt="apple" />
<img src="images/banana-small.png" id="bananas" alt="small banana" />
<p>
	One of the most interesting aspects of fruit is the variety available in each country I live near London, in an area which is know fo its apples.
</p>
<p>
	<button id="parent">Parent</button>
	<button id="child">Child</button>
	<button id="prev">Prev Sibling</button>
	<button id="next">Nex Sibling</button>
</p>
<!-- JavaScript脚本链接请在此处插入 -->
<script>
	var resultElement = document.getElementById('results');
	var element = document.body;

	var buttons = document.getElementsByTagName('button');
	for(var i = 0; i < buttons.length; i++)
	{
		buttons[i].onclick = handleButtonClick;		//注意，此处不是函数调用，而是赋值
	}

	processNewElement(element);

	function handleButtonClick(e)
	{
		if(element.style)
		{
			element.style.backgroundColor = 'white';
		}

		if(e.target.id == 'parent' && element != document.body)
		{
			element = element.parentNode;
		}
		else if(e.target.id == 'child' && element.hasChildNodes())
		{
			element = element.firstChild;
		}
		else if(e.target.id == 'prev' && element.previousSibling)
		{
			element = element.previousSibling;
		}
		else if(e.target.id == 'next' && element.nextSibling)
		{
			element = element.nextSibling;
		}

		processNewElement(element);
		if(element.style)
		{
			element.style.backgroundColor = 'lightgrey';
		}
	}

	function processNewElement(elem)
	{
		resultElement.innerHTML = 'Element type: ' + elem + '\n';
		resultElement.innerHTML = 'Element id: ' + elem.id + '\n';
		resultElement.innerHTML = 'Has child nodes: ' + elem.hasChildNodes() + '\n';

		if(elem.previousSibling)
		{
			resultElement.innerHTML += 'Prev sibling is: ' + elem.previousSibling + '\n';
		}
		else
		{
			resultElement.innerHTML += 'No prev sibling.\n';
		}

		if(elem.nextSibling)
		{
			resultElement.innerHTML += 'Next sibling is: ' + elem.nextSibling + '\n';
		}
		else
		{
			resultElement.innerHTML += 'No next sibling.\n';
		}
	}
</script>
</body>
</html>